<template>
  <el-card style="max-width: 100%">
    <el-row>
      <el-col :span="12">
        <el-card style="width: 800px;">
          <div id="selectByGroupByCategory" style="width: 600px;height: 450px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>

</template>

<script setup>
import * as echarts from "echarts";
import {onMounted} from "vue";
import goodsApi from "@/api/goodsApi.js";


//定义函数显示图表
function chart01() {
  goodsApi.selectByGroupByCategory().then(resp => {
    let data = new Array();
    let count = new Array();

    for (let index = 0; index < resp.data.length; index++) {
      data.push(resp.data[index].name);
      count.push(resp.data[index].count);
    }
    var myChart = echarts.init(document.getElementById('selectByGroupByCategory'));
    var option = {
      title: {
        text: '数量前五的分类和数量',
        textStyle: {
          color: '#000000',
          fontweight: 'lighter'
        }
      },
      legend: {
        data: [`数量`],
        right: '10%',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: '#000000',
        }
      },
      xAxis: {
        data: data,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000000',
            width: 1
          }
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000000',
            width: 1
          }
        }, splitLine: {
          show: false
        }
      },
      series: [{
        name: '数量',
        type: 'bar',
        data: count,
        barWidth: '50%',
      }]
    };
    myChart.setOption(option);
  });

}

onMounted(() => {
  chart01();
});

</script>
<style scoped>

</style>